<template>
  <div>
    <div class="qy">
      <div class="qy-left-box">
        <v-chart
          class="chart"
          :style="`height:${height}px;`"
          :option="chart"
          autoresize
        />
        <div class="text">
          <span class="title1">区域市场占比</span>
          <span class="title2">对比八方港</span>
        </div>
      </div>
      <div class="qy-right-box">
        <div class="tips">作业量单位：万吨</div>
        <el-table
          :data="tabledata"
          :show-header="true"
          style="width: 100%; border: none !important"
          :height="height - 30"
          class="ddt"
          :cell-style="{
            textAlign: 'center',
            padding: '10px',
          }"
          :header-cell-style="{
            'text-align': 'center',
            padding: '10px',
            'font-size': '11px',
            color: '#000',
          }"
        >
          <!--
                 'background-color': '#fff !important',
                  border: 'none',
               -->
          <el-table-column label="月份" prop="PLANMONTH" width="70">
          </el-table-column>
          <el-table-column label="万吨" prop="XCSJ">
            <template slot="header">
              <div class="name">市场卸船</div>
              <!-- <div class="unit">万吨</div> -->
            </template>
          </el-table-column>
          <el-table-column label="万吨" prop="BFXC">
            <template slot="header">
              <div class="name">八方卸船</div>
              <!-- <div class="unit">万吨</div> -->
            </template>
          </el-table-column>
          <el-table-column label="占有率%" prop="ZYL"> </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
// eslint-disable-next-line no-unused-vars
import * as echarts from "echarts";
import "echarts-liquidfill";
// 引入vue-echarts
import VChart from "vue-echarts";
// 标准作业线
export default {
  name: "Scfe",
  components: { VChart },
  props: {
    options: {
      type: Object,
      default() {
        return {};
      },
    },
    height: {
      type: [String, Number],
      default() {
        return "250";
      },
    },
  },
  data() {
    return {
      diosho: false,
      iframeTitle: "",
      iframeSrc: "",
      tabledata: [],
      chart: {
        series: [
          {
            type: "liquidFill",
            radius: "100px",
            data: [0],
            center: ["45%", "40%"],
            label: {
              normal: {
                color: "#fff",
                insideColor: "transparent",
                textStyle: {
                  fontSize: 30,
                  fontWeight: "bold",
                },
              },
            },
            color: [
              {
                type: "linear",
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 1,
                    color: ["#6a7feb"], // 0% 处的颜色
                  },
                  {
                    offset: 0,
                    color: ["#27e5f1"], // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            ],
            outline: {
              show: true,
              borderDistance: 5,
              itemStyle: {
                borderColor: "rgba(67,209,100,1)",
                borderWidth: 0,
              },
            },
          },
        ],
      },
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      this.$api.summary.get_sczb().then((val) => {
        this.tabledata = val.data1;
        this.chart.series[0].data = [val.data2[0].XL];
      });
    },
  },
};
</script>

<style lang="scss">
.qy {
  display: flex;
  justify-content: space-between;
  &-left-box {
    width: 100px;
    position: relative;
    .text {
      position: absolute;
      bottom: 42px;
      left: 50%;
      transform: translateX(-50%);
      span {
        width: 100px;
        display: block;
        text-align: center;
      }
      .title2 {
        font-size: 11px;
        margin-top: 5px;
      }
    }
  }
  &-right-box {
    width: calc(100% - 120px);
    .tips {
      text-align: right;
      font-size: 11px;
      padding: 5px;
    }
    // 表格最外层边框-底部边框
    .ddt {
      &::after,
      &::before {
        width: 0;
      }
    }
  }
}
</style>
